<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page import="java.util.Date"%>
<%@ page import="java.text.DateFormat"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@include file="/WEB-INF/jsp/base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>产品管理</title>

<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<script src="./js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script type="text/javascript" src="js/plugins/modal/bootstrap-modal.js"></script>
<script src="js/common.js"></script>
<!-- 引入富文本编辑器 -->
<script src="js/plugins/ckeditor/ckeditor.js"></script>
<style type="text/css">
.productTable {
	border-collapse: separate;
	border-spacing: 10px;
}
/* dataTables列内容居中 */
.table>tbody>tr>td {
	text-align: center;
}

/* dataTables表头居中 */
.table>thead:first-child>tr:first-child>th {
	text-align: center;
}
</style>
<script type="text/javascript">
	function FormatDate(date) {
		return date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
				+ date.getDate();
	}

	var table;
	var darw = 0;
	$(function() {

		//提示信息
		var lang = {
			"sProcessing" : "<div style=\"float:right;width:50%\" >处理中...</div>",
			"sLengthMenu" : "每页 _MENU_ 项",
			"sZeroRecords" : "没有匹配结果",
			"sInfo" : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
			"sInfoEmpty" : "当前显示第 0 至 0 项，共 0 项",
			"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
			"sInfoPostFix" : "",
			"sSearch" : "搜索:",
			"sUrl" : "",
			"sEmptyTable" : "表中数据为空",
			"sLoadingRecords" : "载入中...",
			"sInfoThousands" : ",",
			"oPaginate" : {
				"sFirst" : "首页",
				"sPrevious" : "上页",
				"sNext" : "下页",
				"sLast" : "末页",
				"sJump" : "跳转"
			},
			"oAria" : {
				"sSortAscending" : ": 以升序排列此列",
				"sSortDescending" : ": 以降序排列此列"
			}
		};

		//初始化表格
		table = $("#productDatatabel")
				.dataTable(
						{

							"fnDrawCallback" : function() {

								var api = this.api();
								var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
								api.column(0).nodes().each(function(cell, i) {
									cell.innerHTML = startIndex + i + 1;
								});

							},
							language : lang, //提示信息
							autoWidth : false, //禁用自动调整列宽
							stripeClasses : [ "odd", "even" ], //为奇偶行加上样式，兼容不支持CSS伪类的场合
							processing : true, //隐藏加载提示,自行处理

							serverSide : true, //启用服务器端分页
							searching : false, //禁用原生搜索
							orderMulti : false, //启用多列排序
							order : [], //取消默认排序查询,否则复选框一列会出现小箭头
							renderer : "bootstrap", //渲染样式：Bootstrap和jquery-ui
							pagingType : "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
							"aLengthMenu" : [ 10 ],
							"bLengthChange" : false,//隐藏分页数量选择框
							ordering : false, //关闭排序图标
							bStateSave : true, //刷新 停留在当前页
							ajax : function(data, callback, settings) {
								//封装请求参数
								var param = {};
								param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
								param.start = data.start;//开始的记录序号
								param.page = (data.start / data.length) + 1;//当前页码
								param.status = 0;//状态
								// param.darw=darw;  //计数器

								var productName = $("#serachPname").val()
										.trim();
								if (productName != null && productName != "") {
									param.productName = productName;
								}

								//console.log(param);
								//ajax请求数据
								$
										.ajax({
											type : "POST",
											url : "queryProductList.do",
											cache : false, //禁用缓存
											data : param, //传入组装的参数
											dataType : "json",
											success : function(result) {

												//console.log(result);
												//setTimeout仅为测试延迟效果
												//封装返回数据
												var returnData = {};
												draw = result.draw;//后台返回的计数器
												returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
												returnData.recordsTotal = result.total;//返回数据全部记录
												returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
												returnData.data = result.data;//返回的数据列表

												//console.log(returnData);
												//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
												//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
												callback(returnData);
											},
											error : function() {
												sweetAlert("异常", "网络出现异常!",
														"error");
											}
										});
							},
							//列表表头字段
							columns : [
									/*         {"data":null},
									{
									"data":"id","visible":false
									} */
									{
										"data" : null
									},
									{
										"data" : "productId",
										"visible" : false
									},
									{
										"data" : "productName"
									},
									{
										"data" : function(data) {
											if (data.introduce == null) {
												return "";
											}
											if (data.introduce.length > 20) {
												return data.introduce.substr(0,
														20)
														+ "...";
											} else {
												return data.introduce;
											}
										}
									}, {
										"data" : "yield"
									},

									{
										"data" : "totalPeriods"
									}, {
										"data" : "limitMoney"
									}, {
										"data" : "createDate"
									}, {
										"data" : "createPeople"
									}
							/*  ,
							 { "data": "section" } */

							],
							columnDefs : [
									{
										"targets" : [ 9 ], //第11列加一条 自定义列
										"data" : "productId", //数据列名
										"render" : function(data, type, full) { //返回自定义的内容

											return "<a class=\"btn btn-info btn-xs\" data-toggle=\"modal\"  onclick=\"productDetail("
													+ data
													+ ")\"   href=\"\">"
													+ "详情<\a>";

										}

									}, {
										"targets" : [ 7 ],//第8列 时间类型转换显示格式
										"data" : "createDate",//数据列名
										"render" : function(data, type, full) { //返回自定义的内容

											//console.log("dataType="+typeof(data));
											var createDate = new Date(data);
											//var sdf=new SimpleDateFormat("yyyy-MM-dd");
											//var strDate=sdf.format(createDate);
											//console.log("createDate=",createDate);
											//var string = createDate.toLocaleString();

											return FormatDate(createDate);
										}
									} ]
						})//.api();
		//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象

	});
</script>

</head>
<body class="gray-bg">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>产品列表</h5>
					<div class="ibox-content">
						<div class="input-group col-md-3"
							style="margin-top: 0px; positon: relative; float: left; bottom: -5px;">
							<input id="serachPname" type="text" class="form-control "
								placeholder="请输入关键字（产品名称）"/ > <span
								class="input-group-btn">
								<button onclick="search()" class="btn btn-info btn-search">查询</button>
							</span>
						</div>
						<table id="productDatatabel"
							class="table table-striped table-bordered table-hover dataTables-example dataTable">
							<thead>
								<tr>
									<th>序号</th>
									<th>产品流水号</th>
									<th>产品名称</th>
									<th>产品介绍</th>
									<th>期待收益率</th>
									<th>产品总期数</th>
									<th>产品额度（元）</th>
									<th>发布时间</th>
									<th>发布人</th>
									<th>操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- 详情模态框 -->
	<div class="modal fade" id='detailModal'>
		<div class="modal-dialog" style="width: 950px; height: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss='modal'>×</button>

					<h2 class="modal-title" align="center">产品详情信息</h2>
				</div>

				<div class="modal-body" align="center">
					<form class="form-horizontal m-t" id="detailForm"
						enctype="multipart/form-data">
						<div class="row form-body form-horizontal m-t">
							<div class="col-md-6 droppable sortable">
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">产品名称： </label>
									<div class="col-sm-8">
										<input type="text" name="productName" id="dproductName"
											class="form-control" disabled="disabled"> <input
											type="hidden" name="productId" id="eproductId"
											disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">期待收益率： </label>
									<div class="col-sm-8">
										<input type="text" name="yield" id="dyield"
											class="form-control" disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">产品总期数： </label>
									<div class="col-sm-8">
										<input type="text" name="totalPeriods" id="dtotalPeriods"
											class="form-control" disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">产品额度： </label>
									<div class="col-sm-8">
										<input type="text" name="totalPeriods" id="dlimitMoney"
											class="form-control" disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">产品介绍： </label>
									<div class="col-sm-8">
										<textarea class="showTextarea" id="dintroduce"
											name="introduce" rows="20" cols="" class="form-control"
											style="width: 735px; height: 200px; resize: none;"
											readonly="readonly"></textarea>
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">营销文案： </label>
									<div class="col-sm-8">
										<textarea class="showTextarea" id="dgraphicsText"
											name="introduce" rows="20" cols="" class="form-control"
											style="width: 735px; height: 200px; resize: none;"
											readonly="readonly"></textarea>
										<script>
											//把txetarea隐藏，富文本显示,等值设好，就把富文本的值赋给textarea进行提交。
											//用js提交，首先在表单设一个Id（myForm）
											CKEDITOR
													.replace(
															"dgraphicsText",
															{
																width : 735,
																height : 400,
																toolbar : [
																		//加粗     斜体，     下划线      穿过线      下标字        上标字
																		[
																				'Bold',
																				'Italic',
																				'Underline',
																				'Strike',
																				'Subscript',
																				'Superscript' ],
																		// 数字列表          实体列表            减小缩进    增大缩进
																		[
																				'NumberedList',
																				'BulletedList',
																				'-',
																				'Outdent',
																				'Indent' ],
																		//左对 齐             居中对齐          右对齐          两端对齐
																		[
																				'JustifyLeft',
																				'JustifyCenter',
																				'JustifyRight',
																				'JustifyBlock' ],
																		//超链接  取消超链接 锚点
																		[
																				'Image',
																				'Link',
																				'Unlink',
																				'Anchor' ],

																		// 样式       格式      字体    字体大小
																		[
																				'Styles',
																				'Format',
																				'Font',
																				'FontSize' ],
																		//文本颜色     背景颜色
																		[
																				'TextColor',
																				'BGColor' ],
																		//全屏           显示区块
																		[
																				'Maximize',
																				'ShowBlocks',
																				'-' ] ]
															});
										</script>
									</div>
								</div>
							</div>
							<div class="col-md-6 droppable sortable">
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">发布时间： </label>
									<div class="col-sm-8">
										<input type="text" name="totalPeriods" id="dcreateDate"
											class="form-control" disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">发布人： </label>
									<div class="col-sm-8">
										<input type="text" name="totalPeriods" id="dcreatePeople"
											class="form-control" disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">风险评级： </label>
									<div class="col-sm-8">
										<select class="form-control" disabled="disabled"
											id="driskRating">
											<option value="0">无</option>
											<option value="1">保守型</option>
											<option value="2">稳健型</option>
											<option value="3">平衡型</option>
											<option value="4">成长型</option>
											<option value="5">进取型</option>
										</select>
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">产品权限： </label>
									<div class="col-sm-8">
										<select class="form-control" disabled="disabled"
											id="dovert">
											<option value="0">内部</option>
											<option value="1">公开</option>
										</select>
									</div>
								</div>
							</div>
					</form>
				</div>
				<div class="modal-footer" align="center">
					<div align="center">
						<button class="btn btn-primary" onclick="modalClose(detailModal)">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>
		//根据id来关闭 modal
		function closeModal(id) {
			$(id).modal("hide");
		}
		//产品详情
		function productDetail(productId) {
			$.ajax({
				url : "toModifyProduct.do",
				data : {
					productId : productId
				},
				dataType : "json",
				type : "post",
				success : function(result) {
					if (result.flag == 1) {
						var createDate = new Date(result.data.createDate);//时间戳转换为date
						createDate = FormatDate(createDate);
						$("#dproductId").val(productId);
						$("#dproductName").val(result.data.productName);
						$("#dintroduce").val(result.data.introduce);
						//$("#dgraphicsText").val(result.data.graphicsText);
						CKEDITOR.instances.dgraphicsText.setReadOnly();
						CKEDITOR.instances.dgraphicsText
								.setData(result.data.graphicsText);//写入信息到文本编辑器
						$("#dlimitMoney").val(result.data.limitMoney);
						$("#dyield").val(result.data.yield);
						$("#dtotalPeriods").val(result.data.totalPeriods);
						$("#dcreateDate").val(createDate);
						$("#dcreatePeople").val(result.data.createPeople);
						$("#driskRating").val(result.data.riskRating);
						$("#dovert").val(result.data.overt);
						$("#dstatus option").each(function() {
							if ($(this).val() == result.data.status) {
								$(this).prop("selected", "selected");
							}
						});
						$("#detailModal").modal("show");
					} else if (result.flag == 0) {
						swal("异常", "暂无数据!请稍后再试。", "error");
					} else {
						swal("异常", "程序出现错误,请联系管理员!", "error");
					}
				},
				error : function() {
					swal("异常", "程序出现错误,请联系管理员!", "error");
				}
			});
		}

		//查询
		function search() {
			/* var oSettings = table.fnSettings();  
			oSettings._iDisplayStart = 0;  
			table.fnDraw(oSettings);   */
			table.fnDraw();
		}
		//关闭modal
		function modalClose(htmlObj) {
			$(htmlObj).modal("hide");
		}
	</script>

</body>
</html>